<script setup lang="ts">
    import Header from '@/components/layout/Header.vue'
    import FloatButton from './FloatButton.vue'
</script>

<template>
    <a-space
        direction="vertical"
        :style="{ width: '100%' }"
    >
        <a-layout>
            <a-layout-header class="header">
                <Header />
            </a-layout-header>
            <a-layout-content class="content">
                <router-view />
                <FloatButton />
            </a-layout-content>
        </a-layout>
    </a-space>
</template>

<style scoped lang="less">
    .header {
        background: var(--color-primary);
        padding: 0 20px;
        line-height: 64px;
        color: white;
        font-size: 18px;
    }
    .content {
        width: 100vw;
        height: calc(100vh - 64px);
    }
</style>
